import React, {useState} from 'react';
import {Tooltip,Modal} from "antd";
import styles from '../../index.less';


const DetailInfo: React.FC = () => {
  const [visible = false, setVisible] = useState();
  return (
    <div>
      <a className={styles.rightContent} onClick={() => {
        setVisible(!visible);
      }}>
        <Tooltip
          title="View More Profile"
          placement="top"
          overlayStyle={{fontSize: '12px'}}
        >
          <i className="iconfont rws-more" style={{cursor: 'pointer'}}/>
        </Tooltip>
      </a>
      <Modal
        title="More Profile"
        visible={visible}
        onCancel={() => {
          setVisible(false);
        }}
        footer={null}
        className={styles.modalBox}
        width="50%"
      >
        <h5 className={styles.bgLeft}>
          <i/>
          MORE INFORMATION
        </h5>

        <h5 className={styles.bgLeft}>
          <i/>
          CONTACTS
        </h5>

        <h5 className={styles.bgLeft}>
          <i/>
          ASSOCIATES
        </h5>

      </Modal>
    </div>
  );
};

export default DetailInfo;
